<template>
    <div class="w-full h-screen bg-blue-50 flex flex-wrap">
        <!-- 左侧显示地图，右侧显示编辑框 -->
        <div class="w-full md:w-5/12 h-2/3 md:h-screen" id="tc_map"></div>

        <!-- 提示信息窗 -->
        <div
            id="info"
            class="bg-white shadow-md fixed top-6 w-4/12 left-4"
            :class="`${infoBoxData.show ? 'block' : 'hidden'}`"
        >
            <div
                class="p-4 text-sm rounded-lg flex flex-col leading-loose"
                :style="`background-color:${colors[infoBoxData.areaType].color}`"
            >
                <div class="font-bold">{{ infoBoxData.zoneTitle }}</div>
                <div class="text-lg">【{{ AREANAME[infoBoxData.areaType] }}】{{ infoBoxData.areaContent }}</div>
                <div
                    class="text-sm my-4"
                >管制时间：{{ infoBoxData.activeDate }} ~ {{ infoBoxData.disableDate }}</div>
            </div>
            <button
                @click="infoBoxData.show = false"
                class="absolute top-3 right-3 animate-bounce"
            >关闭</button>
        </div>

        <!-- 编辑区域 -->
        <div class="md:w-7/12 w-full h-screen overflow-auto flex-grow flex flex-col divide-y">
            <div class="px-4 text-sm">
                当前坐标：
                <input type="text" class="w-72 h-6" :value="nowLatLng" />
                <button class="px-2 bg-red-600 rounded text-white mx-2" @click="setCenter()">设为中心</button>
                <button class="m-4 px-2 bg-blue-800 rounded text-white" @click="addPosition()">添加标记</button>
            </div>

            <div class="flex flex-col px-4 text-xs md:w-10/12">
                <span class="text-xl font-bold">编辑区</span>
                <div class="w-full flex flex-wrap justify-between">
                    <div>
                        当前点位：
                        <span
                            class="w-24"
                            style="line-height:4"
                            v-text="zoneInfo.id"
                            disabled
                        />
                        <!-- <button class="bg-blue-700 px-4 text-white rounded" @click="randomIdOnce()">随机一下</button> -->
                    </div>
                    <div class>
                        点位名称：
                        <input type="text" class="w-96" v-model="zoneInfo.title" />
                    </div>
                    <div>
                        点位中心：
                        <input type="text" class="w-56" :value="zoneInfo.center.join(',')" />
                    </div>
                    <div>
                        点位排序：
                        <input type="number" class="w-24" v-model="zoneInfo.rank" />
                    </div>
                    <div>
                        来源链接：
                        <input type="text" class="w-72" placeholder="新闻链接" v-model="zoneInfo.url" />
                    </div>
                    <button
                        class="px-2 bg-blue-700 text-white m-4 w-28 rounded py-2"
                        @click="saveZoneInfo()"
                    >保存点位信息</button>
                </div>
            </div>

            <div class="w-full p-4 h-full overflow-hidden">
                <div class="w-full bg-indigo-50">
                    <div>
                        点位列表
                        <button
                            class="m-2 bg-blue-700 rounded px-2 text-white"
                            @click="addZone()"
                        >新增点位</button>
                        <button
                            class="m-2 bg-yellow-700 rounded px-2 text-white"
                            @click="showAllZone()"
                        >预览全部</button>
                        <button
                            class="m-2 bg-gray-700 rounded px-2 text-white"
                            @click="clearAllZone()"
                        >清除预览</button>
                        <span class="bg-red-200" v-if="copyState.isCoped">
                            已复制区域对象，在需要的地方粘贴
                            <button
                                class="bg-red-500 text-white"
                                @click="copyState.isCoped = false"
                            >取消粘贴</button>
                        </span>
                    </div>
                    <ul v-if="store.zoneList.length" class="h-96 overflow-auto">
                        <li class="grid grid-cols-7 my-4 text-center">
                            <span>排序</span>
                            <span>点位名称</span>
                            <span>点位中心/来源</span>
                            <span>区域/有效</span>
                            <span class="col-span-3">操作</span>
                        </li>

                        <li
                            v-for="(item, arrayIndex) in store.zoneList"
                            :key="item.id"
                            class="grid grid-cols-7 my-3 text-center"
                        >
                            <span>{{ item.rank || '未知' }}</span>
                            <div
                                class="hover:bg-blue-200 transform hover:scale-105 cursor-pointer"
                                @click="toggle(item.id)"
                            >{{ item.title }}</div>
                            <div class="text-xs">
                                {{ item.center.length ? '有' : '-' }}/
                                <span v-if="item.url.length">
                                    <a :href="item.url" target="_blank" class="text-blue-500">链接</a>
                                </span>
                                <span v-else>-</span>
                                <!-- <span >{{item.url && item.url.length ? `<a href="${item.url}">链接</a>` : '-'}}</span> -->
                            </div>
                            <span>{{ item.AreaList.length }}/{{ checkWithInDateArray(item.AreaList, serverTime) }}</span>
                            <div>
                                <button
                                    class="bg-red-500 text-white rounded w-12 h-8 px-2 m-auto"
                                    @click="deleteZone(item.id)"
                                >删</button>
                                <button
                                    class="bg-blue-500 text-white rounded w-12 h-8 px-2 m-auto"
                                    @click="editZone(item.id)"
                                >编辑</button>
                            </div>
                            <div>
                                <button
                                    class="bg-blue-700 text-xs text-white rounded h-8 px-2 m-auto"
                                    @click="copyAnArea(arrayIndex)"
                                >添加区域</button>
                            </div>
                            <div>
                                <!-- <button  class="bg-yellow-700 text-xs text-white rounded   h-8  px-2 m-auto" >折叠/展开</button> -->
                            </div>

                            <div
                                v-if="item.AreaList.length"
                                :id="item.id"
                                style="display:none"
                                class="col-span-7 bg-indigo-100 text-black pl-16"
                            >
                                <div
                                    v-for="(el, index) in item.AreaList"
                                    :key="index"
                                    class="group flex w-full justify-evenly my-4 text-sm"
                                    :style="`background-color:${colors[el.areaType].color}`"
                                >
                                    <span>{{ index + 1 }}</span>
                                    <span class="w-36">{{ el.content }}</span>
                                    <span>{{ el.positionList.length }}/{{ el.activeDate }} ~ {{ el.disableDate }}</span>
                                    <span>
                                        {{ AREANAME[el.areaType] }}
                                        <div
                                            v-if="!checkWidthInDate(el.activeDate, el.disableDate, serverTime)"
                                            class="text-white"
                                        >
                                            <span class="bg-gray-400 text-white">解封/管制期外</span>
                                        </div>
                                    </span>
                                    <button
                                        class="bg-red-700 text-xs text-white rounded h-6 px-2"
                                        @click="deleteArea(index, item.id)"
                                    >删</button>
                                    <button
                                        class="bg-blue-700 text-xs text-white rounded h-6 px-2"
                                        @click="editArea(index, item.id)"
                                    >编辑</button>
                                    <button
                                        class="invisible group-hover:visible bg-blue-700 text-xs text-white rounded h-6 px-2"
                                        @click="copyArea(index, item.id)"
                                    >复制</button>
                                    <button
                                        v-if="copyState.isCoped"
                                        class="invisible group-hover:visible bg-blue-700 text-xs text-white rounded h-6 px-2"
                                        @click="pasteArea(index, item.id)"
                                    >粘贴</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <span v-else>无</span>
                </div>
                <button
                    @click="produceJson()"
                    class="bg-blue-700 text-white rounded h-8 px-2 my-2"
                >生成json</button>
                <button
                    @click="save(produceJson(),'config.json')"
                    class="bg-red-700 text-white rounded h-8 px-2 m-2"
                >下载config.json</button>
                <button
                    @click="copyCode()"
                    :data-clipboard-text="jsonStr"
                    id="tag-copy"
                    class="bg-green-700 text-white rounded h-8 px-2 m-2"
                >复制</button>
                <router-link to="/"
                >
                <button
                    id="tag-copy"
                    class="bg-blue-700 text-white rounded h-8 px-2 m-2"
                >跳转到主页</button>
                </router-link>
                
                <textarea name id class="w-full" rows="5" v-text="jsonStr"></textarea>
            </div>
            <ul
                v-if="state.positionIndex != null"
                class="border-2 bg-yellow-50 p-4 text-sm absolute left-1 bottom-1"
                style="z-index:1000"
            >
                <span class="text-md mx-4">区域标记点信息</span>
                <span>序号：{{ state.positionIndex == null ? '未关联' : state.positionIndex + 1 }}</span>
                <br />
                <li
                    v-for="(item, index) in state.positionList"
                    :key="index"
                    class="flex justify-evenly my-4"
                >
                    <span>{{ index + 1 }}</span>
                    <span>{{ item.latLng.join(',') }}</span>
                    <button
                        class="bg-red-500 text-white rounded px-2"
                        @click="deletePosition(index)"
                    >删</button>
                    <button
                        class="bg-blue-500 text-white rounded px-2"
                        @click="moveOnPosition(index)"
                    >上移</button>
                    <button
                        class="bg-white text-black rounded px-2"
                        @click="moveDownPosition(index)"
                    >下移</button>
                </li>
                <div>
                    区域备注：
                    <input
                        type="text"
                        v-model="state.content"
                        class="w-72"
                        placeholder="此区域备注信息，请根据公告填写"
                    />
                </div>
                <div>
                    有效时段：
                    <input
                        type="date"
                        v-model="state.activeDate"
                        class="my-2"
                        placeholder="生效日期"
                    />~
                    <input type="date" v-model="state.disableDate" class="my-2" placeholder="失效日期" />
                </div>
                <div>
                    区域类型:
                    <input
                        type="radio"
                        class="text-blue-500"
                        name="areaType"
                        v-model="state.areaType"
                        value="0"
                    />封控区
                    <input
                        type="radio"
                        class="text-blue-500"
                        name="areaType"
                        v-model="state.areaType"
                        value="1"
                    />管控区
                    <input
                        type="radio"
                        class="text-blue-500"
                        name="areaType"
                        v-model="state.areaType"
                        value="2"
                    />防范区
                    <input
                        type="radio"
                        class="text-blue-500"
                        name="areaType"
                        v-model="state.areaType"
                        value="3"
                    />临时管制区
                    <hr class="my-4" />
                    <button class="px-2 m-2 bg-blue-500 text-white" @click="zonePreview()">预览区域</button>

                    <button class="px-2 bg-gray-400 text-white m-4" @click="clearPosition()">取消</button>
                    <!-- <button class="px-2 bg-blue-600 text-white m-4" @click="addPositionToZone()">添加到当前点位</button> -->
                    <button class="px-2 bg-blue-600 text-white m-4" @click="SaveAreaInfo()">保存更改</button>
                </div>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { onMounted, nextTick, reactive, computed, ref, toRefs } from 'vue';
import Clipboard from 'clipboard';
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
let map = null;
let markerLayer = null;
let polygon = null;

// 总的对象
let store = reactive(
    {
        zoneList: []
    }
)

// 变量定义: 服务器时间，这里默认是浏览器当前时间
let serverTime = ref(0)
serverTime.value = new Date().getTime() - 1000 * 3600 * 24;

fetch('./config.json', {
    credentials: 'omit',
    cache: 'no-store'
}).then(res => {
    serverTime.value = new Date(res.headers.get('Date')).getTime()
    return res.json()
})
    .then(res => {
        console.log(res)
        store.zoneList = res.zoneList.sort((a, b) => {
            return a.rank - b.rank
        })
    })

//当前编辑区域的一个响应式对象
let state = reactive({
    positionIndex: null,
    positionList: [],
    areaType: 3,
    content: '',//区域的文字描述
    activeDate: '',
    disableDate: ''

})

//复制对象
let copyState = reactive({
    isCoped: false,
    positionIndex: null,
    positionList: [],
    areaType: 3,
    content: '',//区域的文字描述
    activeDate: '',
    disableDate: ''
});

//当前编辑区域对应的点位信息对象
let zoneInfo = reactive({
    id: '',
    title: '',//点位名称
    center: [0, 0],//点位中心坐标
    rank: 0,
    url: ''
})

//区域名称
const AREANAME = [
    '封控区', "管控区", '防范区', '临时管制区'
]

//调色盘
let colors = [
    {
        color: 'rgba(225,54,17,0.5)',//封控 红色
        borderColor: '#999'
    },
    {
        color: 'rgba(243, 239, 8 ,0.7)',//管控 黄色
        borderColor: '#999'
    },
    {
        color: 'rgba(10, 25, 147 ,0.6)',//防范区 蓝色
        borderColor: '#999'
    },
    {
        color: 'rgba(229, 133, 20 ,0.6)',//临时管制 橙色
        borderColor: '#999'
    },
]

//显示窗口的控制变量
let infoBoxData = reactive({
    show: false,
    areaType: 0,
    zoneId: '',
    zoneTitle: '',
    areaContent: '',
    activeDate: '',
    disableDate: ''
})

// 方法： 初始化地图
let initMap = () => {
    //定义地图中心点坐标
    var center = new TMap.LatLng(30.735708, 120.780018)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map = new TMap.Map(document.getElementById('tc_map'), {
        center: center,//设置地图中心点坐标
        zoom: 15,   //设置地图缩放级别
        //pitch: 43.5,  //设置俯仰角
        //rotation: 0
        //设置地图旋转角度
    });
    //Map实例创建后，通过on方法绑定点击事件
    map.on("click", clickHandler)

    //创建并初始化MultiMarker
    //在地图初始化的时候添加点图层
    markerLayer = new TMap.MultiMarker({
        map: map,  //指定地图容器
        //样式定义
        styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            "myStyle": new TMap.MarkerStyle({
                "width": 25,  // 点标记样式宽度（像素）
                "height": 35, // 点标记样式高度（像素）
                //"src": '../img/marker.png',  //图片路径
                //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                "anchor": { x: 16, y: 32 },
                color: '#333', // 标注点文本颜色
                size: 16, // 标注点文本文字大小
                direction: 'top', // 标注点文本文字相对于标注点图片的方位
                offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                strokeColor: '#fff', // 标注点文本描边颜色
                strokeWidth: 2, // 标注点文本描边宽度
            }),
            "myStyle-blue": new TMap.MarkerStyle({
                "width": 25,  // 点标记样式宽度（像素）
                "height": 35, // 点标记样式高度（像素）
                //"src": '../img/marker.png',  //图片路径
                //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                "anchor": { x: 16, y: 32 },
                color: '#333', // 标注点文本颜色
                size: 16, // 标注点文本文字大小
                direction: 'top', // 标注点文本文字相对于标注点图片的方位
                offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                strokeColor: '#fff', // 标注点文本描边颜色
                strokeWidth: 2, // 标注点文本描边宽度
            }),
        },
        //点标记数据数组
        geometries: [
        ]
    });


    //初始化polygon

    //    这里特意添加了多个图层，可以显示不同的颜色
    // 最下面是临时管制区
    // 其次是防范区
    // 其次是管控区
    // 最后是封闭区
    polygon = new TMap.MultiPolygon({
        id: 'polygon-layer', //图层id
        map: map, //设置多边形图层显示到哪个地图实例中
        //多边形样式
        styles: {
            'polygon-0': new TMap.ExtrudablePolygonStyle({
                'color': colors[0].color, //面填充色
                'showBorder': true, //是否显示拔起面的边线
                'borderColor': colors[0].borderColor, //边线颜色
                "extrudeHeight": 100
            }),
            'polygon-1': new TMap.ExtrudablePolygonStyle({
                'color': colors[1].color, //面填充色
                'showBorder': true, //是否显示拔起面的边线
                'borderColor': colors[1].borderColor,//边线颜色
                "extrudeHeight": 80
            }),
            'polygon-2': new TMap.ExtrudablePolygonStyle({
                'color': colors[2].color, //面填充色
                'showBorder': true, //是否显示拔起面的边线
                'borderColor': colors[2].borderColor, //边线颜色
                "extrudeHeight": 50
            }),
            'polygon-3': new TMap.ExtrudablePolygonStyle({
                'color': colors[3].color, //面填充色
                'showBorder': true, //是否显示拔起面的边线
                'borderColor': colors[3].borderColor, //边线颜色
                "extrudeHeight": 40
            }),
        },
        geometries: [
        ]
    })

}


//当前经纬度
let nowLatLng = ref('')
let nowLatLngArray = ref([0, 0])


// 方法： 随机生成一个id
let randomId = () => {
    return Math.random().toString(36).substr(2, 6)
}
let randomIdOnce = () => {
    zoneInfo.id = randomId();
}




//方法： 新增一块区域
let addZone = () => {
    // 从 zoneclass中new一个
    zoneInfo.id = randomId();
    zoneInfo.title = '请输入名称',
        zoneInfo.rank = 1,
        zoneInfo.url = '',
        zoneInfo.center = [0, 0]
    store.zoneList.push({
        ...zoneInfo, AreaList: []
    })
}


// 方法： 保存当前点位信息
let saveZoneInfo = () => {
    // 两个条件满足：一是id不为空，二是点位中心不为0，三是名称不能为空
    if (!zoneInfo.id.length || !zoneInfo.title.length || !zoneInfo.center[0]) {
        alert('需要指定保存id，并且title不能为空，中心点必须选择一个')
        return false;
    }

    // 判断id再不在列表中
    if (!store.zoneList.map(el => el.id).includes(zoneInfo.id)) {
        alert('点位id不正确')
        return false;
    }
    // 首先要找到当前的点位，按id找
    store.zoneList.forEach(el => {
        if (el.id === zoneInfo.id) {
            // 找到了，把当前变量值保存到store中
            el.title = zoneInfo.title;
            el.center = zoneInfo.center;
            el.rank = zoneInfo.rank;
            el.url = zoneInfo.url;
            alert('保存点位信息成功')
        }
    });
}
// 方法： 删除区域
let deleteZone = (thisId) => {
    console.log('删除点位: ', thisId)
    let index = store.zoneList.findIndex(el => el.id === thisId);
    store.zoneList.splice(index, 1)
}

//方法： 编辑当前点位
let editZone = (thisId) => {
    console.log('正在编辑点位', thisId)
    let { id, title, center, AreaList, rank = 100, url = '' } = store.zoneList.filter(el => el.id == thisId)[0]
    zoneInfo.id = id
    zoneInfo.title = title
    zoneInfo.center = center
    zoneInfo.AreaList = AreaList
    zoneInfo.rank = rank
    zoneInfo.url = url
}

// 方法： 编辑当前区域
let editArea = (thisIndex, thisZoneId) => {
    // 因为传入的是index,没有办法确定是哪个点位的，所以需要额外传入点位id
    // 首先找到当前点位
    console.log(`正在编辑此点位:${thisZoneId}的区域，序号为:${thisIndex + 1}`)

    // 第一步：点位信息关联起来
    let zoneId = store.zoneList.findIndex(el => el.id === thisZoneId)
    let { id, title, center, AreaList, rank = 100, url = '' } = store.zoneList[zoneId]
    zoneInfo.id = id
    zoneInfo.title = title
    zoneInfo.center = center
    zoneInfo.rank = rank
    zoneInfo.url = url
    // zoneInfo.AreaList = AreaList


    // 第二步： 区域信息传给编辑区
    let { positionList, areaType, content, activeDate, disableDate } = store.zoneList[zoneId].AreaList[thisIndex]
    // 当前的索引需要记录下来，否则没有办法保存关联
    state.positionIndex = thisIndex;

    state.positionList = positionList
    state.areaType = areaType
    state.content = content
    state.activeDate = activeDate
    state.disableDate = disableDate
    console.log('editArea方法', state)
}
// 方法： 删除当前区域
let deleteArea = (thisIndex, thisZoneId) => {
    console.log(`正在删除此点位:${thisZoneId}的区域，序号为:${thisIndex + 1}`)
    let zoneId = store.zoneList.findIndex(el => el.id === thisZoneId)
    store.zoneList[zoneId].AreaList.splice(thisIndex, 1)
}


// 方法： 增加或者copy一个区域
// 如果没有区域，那么加一个空的，如果有，那么取最后一个复制一份，并写上复制两字
let copyAnArea = (arrayIndex) => {
    console.log('新增了一条新的')
    store.zoneList[arrayIndex].AreaList.push({
        areaType: 0,
        positionList: [],
        content: '新增区域',
        activeDate: '',
        disableDate: ''
    })

    return false;

    // if(store.zoneList[arrayIndex].AreaList.length){
    //     let length = store.zoneList[arrayIndex].AreaList.length
    //     //复制最后一条
    //     let {areaType, positionList, content, activeDate, disableDate} = store.zoneList[arrayIndex].AreaList[length-1]
    //      console.log('复制了最后一条')
    //      //这里要注意，pisitionList 还是响应性的，具体不清楚
    //     console.log(areaType, positionList, content, activeDate, disableDate,new Array(...positionList))

    //     store.zoneList[arrayIndex].AreaList.push({
    //         positionList: new Array(...positionList),
    //         areaType: areaType,
    //         content :'复制-'+content,
    //         activeDate : activeDate,
    //         disableDate : disableDate,
    //     })

    // }else{
    //     //加一条空的
    //      console.log('新增了一条新的')
    //     store.zoneList[arrayIndex].AreaList.push({
    //         areaType: 0,
    //         positionList:[],
    //         content:'新增区域',
    //         activeDate:'',
    //         disableDate:''
    //     })
    // }
}


let markerArray = () => {
    return state.positionList.map((el, index) => {
        return {
            "id": "" + (index + 1),   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'myStyle',  //指定样式id
            "position": new TMap.LatLng(...el.latLng),  //点标记坐标位置
            "content": "" + (index + 1)
        }
    });
}

//添加点
let addPosition = () => {
    // console.log([...nowLatLngArray.value])
    // 如果当前没有坐标信息，应该弹出框提示并阻止以下操作
    if (nowLatLngArray.value[0] == 0) {
        alert('请选择坐标点后再操作')
        return false;
    }


    state.positionList.push({
        // 这里直接存数组，这样可以在更多地方直接用
        latLng: [...nowLatLngArray.value]
    })

    // 地图添加标记点
    markerLayer.add([{
        "id": "" + state.positionList.length,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        "styleId": 'myStyle',  //指定样式id
        "position": new TMap.LatLng(...nowLatLngArray.value),  //点标记坐标位置
        "content": "" + state.positionList.length,
        "properties": {//自定义属性
            "title": "" + state.positionList.length
        }
    }])

    // console.log( "id", ""+state.positionList.length+1, "title", "" + state.positionList.length)
}

// 删除点
let deletePosition = (index) => {
    if (!state.positionList.length) {
        alert('坐标点已清空，无需删除')
        return false;
    }
    // 根据点的索引删除相应点
    state.positionList.splice(index, 1)
    // console.log(markerArray.value)
    markerLayer.setGeometries(markerArray())
}

//方法： 清空所有标记点
let clearPosition = () => {
    state.positionIndex = null;
    state.positionList = []
    state.areaType = 0
    state.content = ''
    state.activeDate = ''
    state.disableDate = ''
    // 重新标点
    markerLayer.setGeometries(markerArray())
}


// 方法： 设置当前坐标为点位中心
let setCenter = () => {
    if (nowLatLngArray.value[0] == 0) {
        alert('请选择坐标点后再操作')
        return false;
    }
    zoneInfo.center = [...nowLatLngArray.value]

}
// 标记点上移
let moveOnPosition = (index) => {
    if (index == 0) {
        // 啥也不干。到顶了
        return false;
    }
    [state.positionList[index - 1], state.positionList[index]] = [state.positionList[index], state.positionList[index - 1]]
    // 重新标点
    markerLayer.setGeometries(markerArray())
    //    let xx = state.positionList[index-1];
    //    state.positionList[index-1] =  state.positionList[index] 
    //    state.positionList[index]  = xx ;
}

// 标记点下移
let moveDownPosition = (index) => {
    if (index >= state.positionList.length - 1) {
        // 啥也不干。到底了
        return false;
    }
    [state.positionList[index + 1], state.positionList[index]] = [state.positionList[index], state.positionList[index + 1]]
    //重新标点
    markerLayer.setGeometries(markerArray())
    //    let xx = state.positionList[index-1];
    //    state.positionList[index-1] =  state.positionList[index] 
    //    state.positionList[index]  = xx ;
}

//定义事件处理方法
var clickHandler = function (evt) {
    var lat = evt.latLng.getLat().toFixed(8);
    var lng = evt.latLng.getLng().toFixed(8);
    // console.log("您点击的的坐标是："+ lat + "," + lng);
    // 点击之后，将点击处坐标赋值给当前点变量
    nowLatLng.value = lat + "," + lng;
    nowLatLngArray.value = [lat, lng]
    markerLayer.updateGeometries([
        {
            "id": "pointer",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'myStyle-blue',  //指定样式id
            "position": new TMap.LatLng(lat, lng),  //点标记坐标位置
            "content": "",
        }
    ])
}

let { areaType, content, activeDate, disableDate, positionList } = state

//方法： 预览区域
let zonePreview = () => {
    polygon.remove('pl')
    if (state.positionList.length < 3) {
        alert('至少选择三个点')
        return false
    }
    // 首先构造出路径
    let path = state.positionList.map(el => {
        return new TMap.LatLng(...el.latLng)
    })
    // console.log(path)
    // console.log(polygon)
    polygon.updateGeometries([{
        "id": 'pl',
        "styleId": 'polygon-' + state.areaType,
        "paths": path
    }])
    //重新标点
    markerLayer.setGeometries(markerArray())
}
// 方法： 添加当前标注点信息到选中点位
let addPositionToZone = () => {
    if (!zoneInfo.id.length || state.positionList.length < 3) {
        alert('需要指定点位id，并且区域标记点必须至少3个以上，且不共线')
        return false;
    }
    // 判断id再不在列表中
    if (!store.zoneList.map(el => el.id).includes(zoneInfo.id)) {
        alert('点位id不正确')
        return false;
    }
    store.zoneList.forEach(el => {
        if (el.id === zoneInfo.id) {
            //找到点位了
            // 将区域标记点列表push到这个AreaList中
            // console.log(activeDate)
            // console.log(disableDate)
            let { areaType, positionList, content, activeDate, disableDate } = state

            el.AreaList.push({
                areaType: areaType,
                positionList: positionList,
                content: content,
                activeDate: activeDate,
                disableDate: disableDate
            })
            state.positionIndex = state.positionList.length - 1
        }
    })
}

// 方法：传入起始日期和结束日期，以及当前服务器时间，判断是否在区间內部，如果在，返回true,否则false
let checkWidthInDate = (startDateStr = '', endDateStr = '', serverTimeArg = 0) => {
    //如果没有结束日期，字面上我们理解之后任何时间都是有效的，只要服务器时间大于开始时间就返回true
    if (startDateStr.length && !endDateStr.length) {
        if (serverTimeArg >= new Date(startDateStr).getTime()) {
            return true
        } else {
            return false;
        }
    }

    //如果没有起始日期，我们理解为，在结束日期之前都是有效的，返回true，否则false
    if (!startDateStr.length && endDateStr.length) {
        if (serverTimeArg <= new Date(endDateStr).getTime()) {
            return true;
        } else {
            return false;
        }
    }

    //如果开始结束日期都存在，那么判断服务器时间在不在两者中间
    if (startDateStr != '' && endDateStr != '') {
        // console.log('进入判断时间方法，参数都正确')
        // console.log(serverTimeArg >= new Date(startDateStr).getTime() && serverTimeArg <= new Date(endDateStr).getTime())
        if (serverTimeArg >= new Date(startDateStr).getTime() && serverTimeArg <= (new Date(endDateStr).getTime() + 3600 * 1000 * 24)) {
            return true;
        }
        else {
            return false;
        }
    }

    //开始结束都是空字符串，直接返回false
    return false
}

// 方法： 检查area数组中有几块区域是有效区域，即仍在管制时间内
let checkWithInDateArray = (areaList = [], serverTimeArg = 0) => {
    if (!areaList.length) {
        return 0
    }

    let count = 0;
    areaList.forEach(el => {
        if (checkWidthInDate(el.activeDate, el.disableDate, serverTimeArg)) {
            count++
        }
    });
    return count
}

// 方法：保存区域标注信息
let SaveAreaInfo = () => {
    if (!zoneInfo.id.length || state.positionList.length < 3) {
        alert('需要指定点位id，并且区域标记点必须至少3个以上，且不共线')
        return false;
    }
    if (state.positionIndex == null) {
        alert('该坐标点索引错误')
        return false;
    }

    // 判断id再不在列表中
    if (!store.zoneList.map(el => el.id).includes(zoneInfo.id)) {
        alert('点位id不正确')
        return false;
    }

    store.zoneList.forEach(el => {
        if (el.id === zoneInfo.id) {
            // console.log([...el.AreaList[state.positionIndex]])
            let { areaType, positionList, content, activeDate, disableDate } = state
            el.AreaList[state.positionIndex].areaType = areaType;
            el.AreaList[state.positionIndex].positionList = positionList;
            el.AreaList[state.positionIndex].content = content;
            el.AreaList[state.positionIndex].activeDate = activeDate;
            el.AreaList[state.positionIndex].disableDate = disableDate;
            alert('保存成功')
        }
    })
    //保存成功后清除点位
    clearPosition();
}


//最后生成的store json
let jsonStr = ref('')

// 方法： 生成json
let produceJson = () => {
    // 生成之前，对序号进行排序
    store.zoneList.sort((a, b) => {
        return a.rank - b.rank
    })
    jsonStr.value = JSON.stringify(store)
    return jsonStr.value
}
// 方法： 复制json
let copyCode = () => {
    console.log('执行复制')
    const clipboard = new Clipboard("#tag-copy")
    clipboard.on('success', e => {
        alert('复制成功')
        // 释放内存
        clipboard.destroy()
    })
    clipboard.on('error', e => {
        // 不支持复制
        alert('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
    })
}

//变量： 多边形id数组，主要是为了清空多边形，目前来看，必须要Id
let polygonIdList = []

// 方法： 加载所有区域
let showAllZone = () => {
    //移除单个预览区域
    polygon.remove('pl')
    // 重新搞一个数组，去掉没用的，加上需要的信息，然后重新排序，防范区放最底下
    let areaListNew = [];


    // 根据id清除
    polygonIdList.forEach(el => {
        polygon.remove(el)
    })

    polygonIdList = [];



    store.zoneList.forEach(zoneItem => {
        //第一层循环，获取到每一个点位
        if (!zoneItem.AreaList.length) {
            return false;
            //该点位区域为0，则直接返回
        }
        // let areaListNew = zoneItem.AreaList.sort((a,b) =>{
        //     return   b.areaType - a.areaType
        // })
        zoneItem.AreaList.forEach((areaItem, areaIndex) => {
            //第二层循环， 获取到点位的每一个区域

            //如果当前服务器时间不在有效时间段内，那么该区域视为已经解除封控或者还未开始封控，做不显示处理
            if (!checkWidthInDate(areaItem.activeDate, areaItem.disableDate, serverTime.value)) {
                return false
            }
            //  console.log('checkWidthInDate',serverTime,areaItem.activeDate,areaItem.disableDate ,checkWidthInDate(areaItem.activeDate , areaItem.disableDate))
            if (!areaItem.positionList.length || areaItem.positionList.length < 3) {
                return false;
                //该区域坐标没有或者少于3个
            }

            //这里。认为数据满足条件，可以渲染
            areaListNew.push({
                id: zoneItem.id,
                title: zoneItem.title,
                center: zoneItem.center,
                content: areaItem.content,
                activeDate: areaItem.activeDate,
                disableDate: areaItem.disableDate,
                positionList: areaItem.positionList,
                areaType: areaItem.areaType
            })
        })

        // console.log('绘制完成')
    });

    //   新数组按照区域类型进行排序，一切工作都是为了这个
    areaListNew = areaListNew.sort((a, b) => {
        return b.areaType - a.areaType
    })

    //对新数组进行绘制
    areaListNew.forEach((areaItem, areaIndex) => {
        //  画图步骤1：构造出路径数组
        let path = areaItem.positionList.map(el => {
            return new TMap.LatLng(...el.latLng)
        })
        // console.log(areaItem.areaType,areaIndex)
        //  画图步骤2：调用曲线更新方法
        // 记录下Id,便于后面清空
        polygonIdList.push(areaItem.id + '-' + areaIndex)

        polygon.updateGeometries([{
            "id": areaItem.id + '-' + areaIndex,
            "styleId": 'polygon-' + areaItem.areaType,
            "paths": path,
            rank: areaIndex,
            properties: {
                // 多边形的属性数据
                title: areaItem.title,
                content: areaItem.content,
                activeDate: areaItem.activeDate,
                disableDate: areaItem.disableDate,
                areaType: areaItem.areaType
            },
        }])

    })
    // 增加点击事件
    polygon.on('click', polygonEventClick);
}

// 方法： 清除所有区域
let clearAllZone = () => {
    //移除单个预览区域
    polygon.remove('pl')
    // 重新搞一个数组，去掉没用的，加上需要的信息，然后重新排序，防范区放最底下
    let areaListNew = [];


    // 根据id清除
    polygonIdList.forEach(el => {
        polygon.remove(el)
    })

    polygonIdList = [];
}

// 方法：图形点击事件
var polygonEventClick = function (res) {
    console.log('polygon点击事件')
    var res = res && res.geometry;
    if (res) {
        // var infoDom = document.getElementById('info');
        // infoDom.style.display = 'block';
        let { title, content, activeDate, disableDate, areaType } = res.properties
        infoBoxData.show = true

        infoBoxData.zoneTitle = title
        infoBoxData.areaContent = content
        infoBoxData.activeDate = activeDate
        infoBoxData.disableDate = disableDate
        infoBoxData.areaType = areaType

    }
};

//复制区域对象
let copyArea = (areaIndex, zoneId) => {
    let { positionIndex, positionList, areaType, content, activeDate, disableDate } = state
    copyState.isCoped = true
    store.zoneList.forEach(el => {
        if (el.id === zoneId) {
            copyState.positionList = el.AreaList[areaIndex].positionList
            copyState.areaType = el.AreaList[areaIndex].areaType
            copyState.content = el.AreaList[areaIndex].content
            copyState.activeDate = el.AreaList[areaIndex].activeDate
            copyState.disableDate = el.AreaList[areaIndex].disableDate
        }
    })

}

//粘贴区域对象
let pasteArea = (areaIndex, zoneId) => {
    console.log(areaIndex, zoneId)
    let { positionIndex, positionList, areaType, content, activeDate, disableDate } = copyState
    copyState.isCoped = false
    store.zoneList.forEach(el => {
        if (el.id === zoneId) {
            console.log(copyState)
            el.AreaList[areaIndex].positionList = copyState.positionList
            el.AreaList[areaIndex].areaType = copyState.areaType
            el.AreaList[areaIndex].content = copyState.content
            el.AreaList[areaIndex].activeDate = copyState.activeDate
            el.AreaList[areaIndex].disableDate = copyState.disableDate
            console.log('粘贴成功')
            return false;
        }
    })
    // copyState.positionList = positionList
    // copyState.areaType = areaType
    // copyState.content = content
    // copyState.activeDate = activeDate
    // copyState.disableDate = disableDate
}

// 方法： 折叠
let toggle = (zoneId) => {
    // console.log(document.getElementById(zoneId).style.display)
    if (document.getElementById(zoneId).style.display != 'none') {
        document.getElementById(zoneId).style.display = 'none'
    } else {
        document.getElementById(zoneId).style.display = 'block'
    }

}

// 方法 保存json文件
const save = (data, filename) => {
    if (!data) {
        console.error('Console.save: No data')
        alert('无数据不能保存')
        return;
    }
    if (!filename) filename = 'console.json'
    if (typeof data === "object") {
        data = JSON.stringify(data, undefined, 4)
    } var blob = new Blob([data], { type: 'text/json' }),
        e = document.createEvent('MouseEvents'),
        a = document.createElement('a')
    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
}

onMounted(() => {
    nextTick(() => {
        // ...

        initMap()
    })

})
</script>

<style>
#tc_map {
    cursor: url(https://mapapi.qq.com/web/lbs/static/lbs_home/icon/point1.ico)
            12.5 12.5,
        crosshair;
}
#info {
    z-index: 9999;
}
</style>